<template>
  <el-dialog width="1000px" :visible="visible" :title="$t('CABLE_LENGTH_CHECK_CONFIG')" @open="open" @close="close">
    <el-form ref="cableForm" label-width="auto" label-position="left" :model="formData" class="pr-40">
      <el-table :data="formData.tableData" border style="width: 100%">
        <el-table-column type="index" :label="$t('SEQUENCE')" align="center" width="140">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="desc" :label="$t('VERIFICATION_ITEM')" width="350">
          <template slot-scope="scope">
            {{ scope.$index == 0 ? $t('MEASURE_GREATER') : $t('MEASURE_LESS') }}
          </template>
        </el-table-column>
        <el-table-column prop="name" :label="$t('ENABLE_STATUS')" width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.enable" :placeholder="$t('PLEASE_SELECT') + $t('ENABLE_STATUS')">
              <el-option v-for="obj in enableList" :key="obj.label" :label="obj.label" :value="obj.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" :label="$t('THRESHOLD')">
          <template slot-scope="scope">
            <el-form-item
              :prop="'tableData.' + scope.$index + '.less'"
              :rules="[
                {
                  validator: checkless,
                  trigger: ['blur', 'change']
                }
              ]
              "
            >
              <el-input
                v-model.trim="scope.row.less"
                :placeholder="$t('1_TO_99')"
              />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <template v-slot:footer>
      <el-button @click="close">{{ $t('CANCEL') }}</el-button>
      <el-button type="primary" @click="$debounce(save)">{{ $t('SAVE') }}</el-button>
    </template>
  </el-dialog>
</template>
<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils/common'
  import paramApi from '@/api/system/ParamApi'
  import OperateLogApi from '@/api/system/OperateLogApi.js'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        formData: {
          enable: true,
          greaterEnable: true,
          greater: 30,
          lessEnable: true,
          less: 30,
          tableData: [
            {
              enable: true,
              less: ''
            },
            {
              enable: true,
              less: ''
            }
          ]
        },
        configData: {},
        cloneFormData: {}
      }
    },
    computed: {
      ...mapGetters(['getUserId', 'getUser']),
      enableList() {
        return [
          { label: this.$t('ENABLE'), value: true },
          { label: this.$t('DISABLE'), value: false }
        ]
      }
    },
    created() { },
    methods: {
      checkless(rule, value, callback) {
        const reg = /^([1-9]|[1-9][0-9])$/
        if (!value) {
          callback()
        } else if (!reg.test(value)) {
          callback(new Error(this.$t('1_TO_99')))
        } else {
          callback()
        }
      },
      open() {
        paramApi.page({ page: 1, size: 1, keyword: 'CABLE_LENGTH_COMPARE' }).then(res => {
          const configData = res.list ? res.list[0] : null
          if (configData) {
            this.configData = configData
            const paramValue = JSON.parse(configData.paramValue || '{}')
            this.formData = {
              ...this.$options.data().formData,
              ...paramValue
            }
            this.formData.enable = configData.enable
            this.formData.tableData[0]['enable'] = paramValue.greaterEnable
            this.formData.tableData[0]['less'] = paramValue.greater
            this.formData.tableData[1]['enable'] = paramValue.lessEnable
            this.formData.tableData[1]['less'] = paramValue.less
            this.cloneFormData = deepClone(this.formData)
          }
        })
      },
      save() {
        this.$refs['cableForm'].validate((valid) => {
          if (valid) {
            this.formData.greaterEnable = this.formData.tableData[0]['less'] ? this.formData.tableData[0]['enable'] : false
            this.formData.greater = this.formData.tableData[0]['less']
            this.formData.lessEnable = this.formData.tableData[1]['less'] ? this.formData.tableData[1]['enable'] : false
            this.formData.less = this.formData.tableData[1]['less']
            delete this.formData.tableData
            paramApi
              .mod({
                ...this.configData,
                enable: this.formData.enable,
                paramValue: JSON.stringify(this.formData)
              })
              .then(res => {
                this.$message.success(this.$t('SAVE_SUCCESS'))
                this.close()
                this.addLog(true)
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      close() {
        this.$emit('update:visible', false)
      },
      addLog(result = true) {
        let desc1 = ''
        if (this.cloneFormData.greaterEnable !== this.formData.greaterEnable) {
          desc1 = this.$t('CHANGE_TO', { value: this.formData.greaterEnable ? this.$t('ENABLE') : this.$t('DISABLE') }) + '，'
        }
        if (this.cloneFormData.greater !== this.formData.greater) {
          desc1 += this.$t('VALUE_CHANGE_TO', { value: this.formData.greater })
        }
        if (desc1) {
          desc1 = this.$t('MEASURE_GREATER') + desc1
        }
        let desc2 = ''
        if (this.cloneFormData.lessEnable !== this.formData.lessEnable) {
          desc2 = this.$t('CHANGE_TO', { value: this.formData.lessEnable ? this.$t('ENABLE') : this.$t('DISABLE') }) + '，'
        }
        if (this.cloneFormData.less !== this.formData.less) {
          desc2 += this.$t('VALUE_CHANGE_TO', { value: this.formData.less })
        }
        if (desc2) {
          desc2 = this.$t('MEASURE_LESS') + desc2
        }
        if (!desc1 && !desc2) return
        const obj = {
          api: '/',
          item: 'MENU_CABLE_MANAGER', // 光缆管理
          object: '/',
          terminal: 'LENGTH_CHECK_CONFIG', // 长度校验设置
          operateResult: result,
          realName: this.getUser.realName,
          content: JSON.stringify({
            desc: desc1 ? desc1 + '<br/>' + desc2 : desc2,
            currentUserId: this.getUserId,
            i18nKey: 'CABLE_LENGTH_CHECK_CONFIG_LOG2'
          })
        }
        // 记录登录日志
        OperateLogApi.addLog(obj)
      }
    }
  }
</script>
<style lang="scss"></style>
